<template>
    <!-- 直接发起经办合同 -->
    <div>
        <div class="header flexbetween">
            <div class="flexleft" style="flex:1">
                <div class="shutup pointer" @click="shutup">
                    <!-- 关闭 -->
                    <i class="el-icon-close" style="color: #fff;font-size: 24px;"></i>
                </div>
                <div class="margin-left1 margin-right3">
                    <img src="@/assets/img/layout/logo.png" alt="" class="logoimg">
                </div>
                <div class="title">直接发起</div>
            </div>
            <ul class="toptext flexcenter" style="flex:2">
                <li class="cicle focus margin-right1 ">1</li>
                <li class="colorfff margin-right1">设置文件与参与人</li>
                <span class="fgline margin-right1"></span>
                <li class="cicle margin-right1">2</li>
                <li class="colorhui margin-right1">发起签署</li>
            </ul>
            <ul class="flexright" style="flex:1">
                <li class="margin-right3 colorfff btn2 pointer" @click="nextstap">发起签署</li>
            </ul>
        </div>
        <div class="pagepadding">
            <!-- 模板基本信息 -->
            <div class="ffffff radius boxshadow mainpadding">
                <div class="flexleft">
                    <div class="leftline"></div>
                    <div class="titletext margin-right3">模板基本信息</div>
                    <div class="smalltext-box margin-right3">
                        <i class="el-icon-location"></i>
                        <span class="margin-left1">{{ activeSuject.sujectName }}</span>
                    </div>
                    <div class="hui smalltext">剩余分数：<span class="redstar">{{ activeSuject.signNum }}</span>份</div>
                </div>
                <div class="margin-top4 mainpadding bglan1 inline xuxian radius">
                    <el-upload
                    class="upload-demo"
                    action="/upload/pc/image"
                    :on-remove="handleRemove"
                    :on-success="uploadChange"
                    :limit="1"
                    :name="'image'"
                    :file-list="fileList"
                    >
                        <el-button type="primary" icon="el-icon-upload2" v-show="!form.contractFile">添加签署文件</el-button>
                    </el-upload>
                    
                    <span class="smalltext margin-left1 hui" style="line-height: 26px;display: inline-block;">文件小于30M</span>
                </div>
                <div class="margin-top3"></div>
                <el-form ref="form" label-width="80px">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="模板归属">
                                <div class="tabtext hui">个人空间</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="合同名称" prop="name">
                                <el-input v-model="form.contractName" placeholder="请输入合同名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 设置签署方 -->
            <div class="ffffff radius boxshadow mainpadding margin-top2">
                <div class="flexleft">
                    <div class="leftline"></div>
                    <div class="titletext margin-right3">设置签署方</div>
                </div>
                <div class="margin-top3 flexbetween">
                    <div>
                        <el-radio v-model="radio" label="1" border>单方签署</el-radio>
                        <el-radio v-model="radio" label="2" border>双方签署</el-radio>
                        <el-radio v-model="radio" label="3" border>多方签署</el-radio>
                    </div>
                    <div>
                        <!-- <el-tooltip class="item" effect="dark" content="可设置签署方的签署顺序" placement="top-start">
                            <el-button @click="dialogVisible3 = true">顺序设置</el-button>
                        </el-tooltip> -->
                        <!-- <el-tooltip class="item" effect="dark" content="可设置签署方的签署顺序" placement="top-start">
                            <el-button>自动添加</el-button>
                        </el-tooltip> -->
                    </div>
                </div>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:20px;"
                    :header-cell-style="tableHeaderColor">
                    <el-table-column label="参与主体" width="220">
                        <template slot-scope="scope">
                            <div class="flexleft typeSelect">
                                <el-select v-model="scope.row.type" placeholder="请选择" size="mini" @change="typeChange(scope.$index,scope.row.type)">
                                    <el-option :key="0" :label="'个人'" :value="0"></el-option>
                                    <el-option :key="1" :label="'企业'" :value="1"></el-option>
                                </el-select>
                                <div class="tabtext margin-left1">签署方1<i class="el-icon-edit" style="color: #dcdfe6;"></i></div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="参与方式" width="150">
                        签署
                    </el-table-column>
                    <el-table-column label="参与方信息">
                        <template slot-scope="scope">
                            <el-row :gutter="20">
                                <el-col :span="7">
                                    <el-input placeholder="联系人" v-model="scope.row.userName" class="input-with-select">
                                    </el-input>
                                </el-col>
                                <el-col :span="7">
                                    <el-input placeholder="请输入手机号" v-model="scope.row.userPhone" class="input-with-select">
                                    </el-input>
                                </el-col>
                                <el-col :span="7" v-show="scope.row.type==1">
                                    <el-input placeholder="请输入企业名称" v-model="scope.row.enterpriseName" class="input-with-select">
                                    </el-input>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="设置盖章方式和意愿认证方式" placement="top-start">
                                <el-button type="text" @click="openMode(scope.row,scope.$index)">签署设置</el-button>
                            </el-tooltip>
                            <el-button type="text">清空</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="margin-top3">
                    <el-button :disabled="radio!=3" icon="el-icon-plus" @click="addEnterpriseSigner">添加企业</el-button>
                    <el-button :disabled="radio!=3" icon="el-icon-plus" @click="addPersonSigner">添加个人</el-button>
                </el-row>
            </div>
            <!-- 选填项设置 -->
            <div class="ffffff radius boxshadow mainpadding margin-top2 xtx">
                <div class="flexleft">
                    <div class="leftline"></div>
                    <div class="titletext margin-right3">选填项设置</div>
                </div>
                <div class="margin-top3"></div>
                <el-form ref="form" label-width="80px">
                    <el-row :gutter="10">
                        <el-col :span="5">
                            <el-form-item label="签订截止日期" prop="name">
                                <el-date-picker
                                    v-model="form.signEndTime"
                                    :picker-options="pickerOptions0"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="flexstart">
                        <div class="tabtext margin-left2 margin-right3">合同抄送</div>
                        <div style="width: 90%;">
                            <div class="bglan1 mainpadding">
                                <div class="flexbetween" v-for="(item,indx) in ccDtoList" :key="indx">
                                    <div class="itemli margin-top1 flexleft">
                                        <div class="tabtext" v-show="item.type==0">个人：</div>
                                        <div class="tabtext" v-show="item.type==1">企业：</div>
                                        <el-input placeholder="联系人" style="width:200px " v-model="item.userName" class="input-with-select  margin-right1">
                                        </el-input>
                                        <el-input placeholder="联系电话" style="width:200px;" v-model="item.userPhone" class="input-with-select margin-right1">
                                        </el-input>
                                        <el-input placeholder="公司名称" style="width:200px" v-model="item.enterpriseName" class="input-with-select" v-show="item.type==1">
                                        </el-input>
                                    </div>
                                    <i class="el-input__icon el-icon-delete" @click="deleteCcdata(indx)"></i>
                                </div>

                            </div>
                            <div class="margin-top3">
                                <el-button  icon="el-icon-plus" @click="selectlxr(1)">添加企业</el-button>
                                <el-button  icon="el-icon-plus" @click="selectlxr(0)">添加个人</el-button>
                                <el-tooltip class="item" effect="dark" content="最多可添加30人，抄送方不可签署，仅支持查阅，签署完成后会通知抄送方"
                                    placement="top-start">
                                    <i class="el-icon-warning margin-left2" style="color: #c0c4cc;"></i>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="flexleft">
                        <div class="tabtext margin-left2 margin-right3">合同附件</div>
                        <el-upload
                        class="upload-demo"
                        action="/upload/image"
                        :on-remove="enclosureRemove"
                        :on-success="enclosureChange"
                        :limit="30"
                        :name="'image'"
                        :file-list="enclosureList"
                        >
                            <el-button icon="el-icon-paperclip" type="text" class="margin-right1">添加附件</el-button>
                        </el-upload>
                        
                        <el-tooltip class="item" effect="dark" content="至多50份文件，单份文件小于10M，仅用于查阅无需签署，附件不记入扣费套餐"
                            placement="top-start">
                            <i class="el-icon-warning el-input__icon" style="color: #c0c4cc;"></i>
                        </el-tooltip>
                    </div>
                </el-form>
            </div>
        </div>

        <!-- 选择签署方式弹窗 -->
        <el-drawer
            title="签署方式"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose">
            <!-- <span>我来啦!</span> -->
            <div class="demo-drawer__content" style="padding:0 20px;">
                <div>签署方式</div>
                <div v-show="tableSeleteItem.type==0" style="margin-top:20px;">
                    <el-checkbox-group v-model="personModeList">
                        <el-checkbox label="1">手绘签名</el-checkbox> <br>
                        <el-checkbox label="2">模板章</el-checkbox>
                    </el-checkbox-group>
                </div>

                <div v-show="tableSeleteItem.type==1" style="margin-top:20px;">
                    <el-checkbox-group v-model="EnterpiseModeList">
                        <el-checkbox label="3">企业章</el-checkbox> <br>
                        <el-checkbox label="5">法定代表人章</el-checkbox>
                    </el-checkbox-group>
                </div>

                <div class="demo-drawer__footer" style="position: absolute;bottom:0;">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="confirmForm">确 定</el-button>
                </div>
            </div>
            
            
        </el-drawer>

        <!-- 联系人列表，联系人选人 -->
        <el-dialog title="联系人列表" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-input placeholder="请输入内容" suffix-icon="el-icon-search" style="width:300px" v-model="input1">
            </el-input>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @row-click="singleElection"
                style="width: 100%">
                <el-table-column align="center" width="55" label="选择">
                    <template slot-scope="scope">
                        <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                        <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="名称">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="手机号" width="120">
                </el-table-column>
                <el-table-column prop="address" label="所在企业" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="address" label="备注" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 顺序设置 -->
        <SequenceSet :sequenceshow="dialogVisible3"/>
    </div>
</template>

<script>
import { Upload } from "element-ui"
import SequenceSet from "../template/components/sequenceSet.vue"
import {addContractSigning} from '@/api/work'
import Cookies from 'js-cookie'
import {mapState} from 'vuex'
export default {
    computed:mapState({
        activeSuject: state => state.user.activeSuject
    }),
    components:{SequenceSet},
    data() {
        return {
            enclosureList:[],//附件文件列表
            pickerOptions0: { 
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7; 
                }
            },
            personModeList:["1","2"],
            EnterpiseModeList:["3"],

            drawer: false,//签署方式弹出层
            direction: 'rtl',//弹出层位置右边弹出
            input1:'',
            fileList:[],
            form: {//合同详情
                contractFileName: "",//合同文件名
                contractFile:"",//合同文件地址
                contractImg:"",//合同文件图片
                contractName:"",//合同名称
                enclosure:"",
                launchType:"0",//发起人身份0个人1企业
                signEndTime:"",//合同截止时间
                signEnterpriseId:"",//发起合同的企业名
                userId:"",//用户id
            },
            rules: {
                name: [
                    { required: true, message: '模板名称不能为空', trigger: 'blur' },
                ]
            },
            
            checked: false,
            radio: "1",
            tableData: [//签署人列表
                {
                    type:0,//类型 0 用户 1企业
                    userName:"",//联系人姓名
                    userPhone:"",//联系人手机号
                    // sginCategory:1,//签署类别（1签署 2抄送 ）（3发起人 类型 当需要发起人审核解约的时候生成该类型）
                    signMode:'1,2',//签署方式 个人（模板/手绘）1,2企业（企业章/法人章）3,5
                    signModeName:'手绘章,模板章',//签署方式名称
                    signLevel:1,//签署顺序
                    id:0,
                    enterpriseName:'',//企业名称
                }
            ],
            enclosureListData:[],
            tableSeleteItem:{},
            tableSelectIndex:0,
            dialogVisible: false,
            dialogVisible3: false,
            input3: "",
            templateSelection: "",//联系人选择单选单选勾选的id
            rylistShow: false,//人员列表弹出层
            ccDtoList:[//抄送人
                // {
                //     enterpriseName: null,
                //     id: 0,
                //     signLevel: 1,
                //     signMode: null,
                //     signModeName: null,
                //     type: 0,
                //     userName:"",
                //     userPhone:""
                // }
            ],
        }
    },
    watch:{
        radio(newval){
            if(newval==1){
                if(this.tableData.length>1){
                    this.tableData.splice(1,this.tableData.length-1);
                }
            }
            if(newval==2){
                
                if(this.tableData.length==1){
                    let leve = this.tableData.length+1;
                    this.tableData.push({
                        type:0,//类型 0 用户 1企业
                        userName:"",//联系人姓名
                        userPhone:"",//联系人手机号
                        // sginCategory:1,//签署类别（1签署 2抄送 ）（3发起人 类型 当需要发起人审核解约的时候生成该类型）
                        signMode:'1,2',//签署方式 个人（模板/手绘）1,2企业（企业章/法人章）3,5
                        signModeName:'手绘章,模板章',//签署方式名称
                        signLevel:leve,//签署顺序
                        id:0,
                        enterpriseName:'',//企业名称
                    })
                }else if(this.tableData.length>2){
                    this.tableData.splice(2,this.tableData.length-2);
                }
            }
            if(newval==3){
                let leve = this.tableData.length+1;
                let leve2 = this.tableData.length+2;
                let newObj = {
                    type:0,//类型 0 用户 1企业
                    userName:"",//联系人姓名
                    userPhone:"",//联系人手机号
                    // sginCategory:1,//签署类别（1签署 2抄送 ）（3发起人 类型 当需要发起人审核解约的时候生成该类型）
                    signMode:'1,2',//签署方式 个人（模板/手绘）1,2企业（企业章/法人章）3,5
                    signModeName:'手绘章,模板章',//签署方式名称
                    signLevel:leve,//签署顺序
                    id:0,
                    enterpriseName:'',//企业名称
                };
                let newObj2 = {
                    type:0,//类型 0 用户 1企业
                    userName:"",//联系人姓名
                    userPhone:"",//联系人手机号
                    // sginCategory:1,//签署类别（1签署 2抄送 ）（3发起人 类型 当需要发起人审核解约的时候生成该类型）
                    signMode:'1,2',//签署方式 个人（模板/手绘）1,2企业（企业章/法人章）3,5
                    signModeName:'手绘章,模板章',//签署方式名称
                    signLevel:leve2,//签署顺序
                    id:0,
                    enterpriseName:'',//企业名称
                };
                if(this.tableData.length==1){
                    this.tableData.push(newObj);
                    this.tableData.push(newObj2);
                }else if(this.tableData.length==2){
                    this.tableData.push(newObj);
                }
            }
        }
    },
    mounted(){
        // console.log(this.activeSuject)
        this.userId = Cookies.get('admin_id');
        this.form.userId = Cookies.get('admin_id');
    },
    methods: {
        //添加企业签署方
        addEnterpriseSigner(){
            let leve = this.tableData.length+1;
            this.tableData.push({
                    type:1,//类型 0 用户 1企业
                    userName:"",//联系人姓名
                    userPhone:"",//联系人手机号
                    // sginCategory:1,//签署类别（1签署 2抄送 ）（3发起人 类型 当需要发起人审核解约的时候生成该类型）
                    signMode:'3',//签署方式 个人（模板/手绘）1,2企业（企业章/法人章）3,5
                    signModeName:'企业章',//签署方式名称
                    signLevel:leve,//签署顺序
                    id:0,
                    enterpriseName:'',//企业名称
                })
        },
        //添加个人签署方
        addPersonSigner(){
            let leve = this.tableData.length+1;
            this.tableData.push({
                    type:0,//类型 0 用户 1企业
                    userName:"",//联系人姓名
                    userPhone:"",//联系人手机号
                    // sginCategory:1,//签署类别（1签署 2抄送 ）（3发起人 类型 当需要发起人审核解约的时候生成该类型）
                    signMode:'1,2',//签署方式 个人（模板/手绘）1,2企业（企业章/法人章）3,5
                    signModeName:'手绘章,模板章',//签署方式名称
                    signLevel:leve,//签署顺序
                    id:0,
                    enterpriseName:'',//企业名称
                })
        },
        typeChange(indes,type){
            // console.log(indes,type)
            if(type==0){
                this.tableData[indes].signMode = '1,2';
                this.tableData[indes].signModeName = '手绘章,模板章';
            }else{
                this.tableData[indes].signMode = '3';
                this.tableData[indes].signModeName = '企业章';
            }
        },
        //附件删除
        enclosureRemove(datas,fileList){
            this.enclosureListData = fileList;
        },
        //附件change
        enclosureChange(datas,files,fileList){
            
            this.enclosureListData = fileList;
        },
        cancelForm(){
            this.drawer = false;
        },
        confirmForm(){
            if(this.tableSeleteItem.type==0){
                if(this.personModeList.length==0){
                    this.$message("至少选择一种签署方式")
                    return;
                }
                this.tableData[this.tableSelectIndex].signMode = this.personModeList.join(",");
                console.log(this.personModeList.join(","))
            }else{
                if(this.EnterpiseModeList.length==0){
                    this.$message("至少选择一种签署方式")
                    return;
                }
                this.tableData[this.tableSelectIndex].signMode = this.EnterpiseModeList.join(",");
                console.log(this.EnterpiseModeList.join(","))
            }
            this.drawer = false;
        },
        //签署方式
        openMode(item,indx){
            // console.log(item,indx);
            
            if(item.type==0){
                this.personModeList = item.signMode.split(",");
                console.log(this.personModeList);
            }else{
                this.EnterpiseModeList =item.signMode.split(",");
                console.log(this.EnterpiseModeList)
            }
            this.tableSeleteItem = item;
            this.tableSelectIndex = indx;

            this.drawer = true;
        },
        uploadChange(response){
            // console.log(file, fileList)
            this.form.contractFile = response.result.contractFile;
            this.form.contractImg = response.result.contractImg;
            let contractFileName = response.result.contractFile.split("/");
            console.log(contractFileName[contractFileName.length-1])
            this.form.contractFileName = contractFileName[contractFileName.length-1];
            // console.log(response)
        },
        handleRemove(){
            this.form.contractFile = "";
            this.form.contractImg = "";
        },
        //发起签署
        nextstap(){
            if(this.form.contractFile==''){
                this.$message("请上传合同文件")
                return;
            }
            if(this.form.contractName==''){
                this.$message("请输入合同名称");
                return;
            }
            for(let item of this.tableData){
                if(item.userName==''){
                    this.$message("请输入签署人姓名");
                    return;
                }
                if(item.userPhone==''){
                    this.$message("请输入签署人手机号");
                    return;
                }
                if(item.type==1&&item.enterpriseName==""){
                    this.$message("请输入企业名称");
                    return;
                }
            }
            if(this.ccDtoList.length>0){
                for(let item of this.ccDtoList){
                    if(item.userName==''){
                        this.$message("请输入抄送人姓名");
                        return;
                    }
                    if(item.userPhone==''){
                        this.$message("请输入抄送人手机号");
                        return;
                    }
                    if(item.type==1&&item.enterpriseName==""){
                        this.$message("请输入抄送企业名称");
                        return;
                    }
                }
            }

            this.tableData.forEach((item,indexc)=>{
                if(item.signMode=="1"){
                    item.signModeName = "手绘章";
                }
                if(item.signMode=="2"){
                    item.signModeName = "模板章";
                }
                if(item.signMode=="1,2"){
                    item.signModeName = "手绘章,模板章";
                }
                if(item.signMode=="3"){
                    item.signModeName = "企业章";
                }
                if(item.signMode=="5"){
                    item.signModeName = "法人章";
                }
                if(item.signMode=="3,5"){
                    item.signModeName = "企业章,法人章";
                }
            })
            if(this.form.signEndTime!=''){
                this.form.signEndTime = this.form.signEndTime+' 23:59:59'
            }

            this.form.launchType = this.activeSuject.sujectType;
            this.form.signEnterpriseId = this.activeSuject.enterpriseId;

            for(let p = 0; p < this.enclosureListData.length;p++){
                if(p==this.enclosureListData.length-1){
                    this.form.enclosure = this.form.enclosure+this.enclosureListData[p].response.message;
                }else{
                    this.form.enclosure = this.form.enclosure+this.enclosureListData[p].response.message+',';
                }
            }
            console.log(this.form.enclosure)
            // this.$router.push({path:"/setTemplate"})
            let datas = {
                ccDtoList:this.ccDtoList,
                contractSigning:this.form,
                enterpriseSignDtoList:this.tableData
            }
            addContractSigning(datas).then(res=>{
                this.$message(res.message);
                if(res.code==200){
                    this.$router.push({
                        path:"/handle"
                    })
                }
            })
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f8fa;color: #333;font-weight: 400;'
            }
        },
        // 联系人选择单选点击事件
        singleElection(row) {
            this.templateSelection = row.id
            this.checkList = this.tableData.filter((item) => item.id === row.id)
            console.log(`该行的编号为${row.id}`)
        },
        deleteCcdata(indx){
            this.ccDtoList.splice(indx,1);
        },
        selectlxr(e) {
            if(e==0){
                this.ccDtoList.push(
                    {
                        enterpriseName: null,
                        id: 0,
                        signLevel: 1,
                        signMode: null,
                        signModeName: null,
                        type: 0,
                        userName:"",
                        userPhone:""
                    }
                )
            }else{
                this.ccDtoList.push(
                    {
                        enterpriseName: null,
                        id: 0,
                        signLevel: 1,
                        signMode: null,
                        signModeName: null,
                        type: 1,
                        userName:"",
                        userPhone:""
                    }
                )
            }
        },
        handleClose(done) {
            done();
        },
        shutup() {
            this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '我要保存',
                cancelButtonText: '放弃修改'
            })
                .then(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '保存修改'
                    // });
                })
                .catch(action => {
                    if (action === 'cancel') {
                        this.$router.go(-1)
                    }
                    // this.$message({
                    //     type: 'info',
                    //     message: action === 'cancel'
                    //         ? '放弃保存并离开页面'
                    //         : '停留在当前页面'
                    // })
                });
        }
    }
}
</script>
<style lang="scss">


.msg {
    background-color: #fff6e7;
    font-size: 16px;
}

.el-input-group__append {
    background-color: #fff;
}

.xtx .el-form-item__label {
    width: 110px !important;
}

.xtx .el-form-item__content {
    margin-left: 110px !important;
}
.typeSelect .el-input--suffix .el-input__inner{
    padding-left: 5px !important;
    width: 70px !important;
}
</style>
<style lang="scss" scoped>
.leftmsg {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 15px;
}

.rightmsg {
    padding: 20px 15px;

}

.itembm {
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
}

.itembm:hover {
    background-color: #fafafa;
}

.namebox {
    padding: 10px 5px;
    border-radius: 5px;
}






.cicle {
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 50%;
    line-height: 30px;
    background-color: #4e5969;
    text-align: center;
}

.focus {
    background-color: #fff;
}

.colorhui {
    color: #999;
}

.toptext {
    font-size: 14px;
}

.colorfff {
    color: #fff;
}

.fgline {
    width: 35px;
    height: 2px;
    background-color: #fff;
}

.header {
    background-color: #262729;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

.logoimg {
    width: 110px;
    height: 28px;
    margin-top: 5px;
}

.shutup {
    background-color: #3b4049;
    padding: 15px 20px;
}

.title {
    color: #fff;
    padding: 0 30px;
    border-left: 1px solid #fff;
    font-size: 20px;
}

.btn1 {
    padding: 3px 13px;
    border: 1px solid #fff;
    border-radius: 3px;
}

.btn2 {
    padding: 3px 13px;
    border: 1px solid #1063f1;
    border-radius: 3px;
    background-color: #1063f1;
}

.pagepadding {
    padding: 80px 0 0;
    width: 1200px;
    margin: 0 auto;
}
.upload-demo{
    display: inline-block;
    vertical-align: bottom;
}
.boxshadow {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
}

.leftline {
    margin-right: 15px;
    width: 3px;
    height: 18px;
    background-color: #1063f1;
}

.titletext {
    font-size: 18px;
}

.smalltext-box {
    font-size: 16px;
    background-color: #ebf2ff;
    border-radius: 10px;
    padding: 3px 10px;
}

.smalltext {
    font-size: 12px;
    color: #333;
}

.xuxian {
    border: 1px dashed #1063f1;
}

.qiyeselect {
    background-color: #ebf2ff;
    border: 1px solid rgba(16, 99, 241, .5);
    border-radius: 3px;
    color: #1063f1;
    padding: 0 3px;
}

.gerenselect {
    background-color: #fff6e6;
    border: 1px solid #e6970f;
    border-radius: 3px;
    color: #e6970f;
    padding: 0 3px;
}
</style>